import 'package:flutter/material.dart';
import 'package:flutter_scan_tool/models/title_count.dart';

class SumView extends StatelessWidget{

  const SumView({Key? key,this.animationController,this.animation, required this.titleCount}):super(key:key);

  final TitleCount titleCount;
  final AnimationController? animationController;
  final Animation<double>? animation;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: animationController!,
        builder: (BuildContext context,Widget? child){
          return FadeTransition(
              opacity: animation!,
            child: Transform(
              transform: Matrix4.translationValues(100*(1.0-animation!.value), 0.0, 0.0),
              child: Container(
                width: 200,
                margin: const EdgeInsets.all(10),
                child: Stack(
                  children: [
                    Padding(
                        padding: const EdgeInsets.only(top: 32,left: 8,bottom: 16),
                      child: Center(
                        child: Container(
                          width: 200,
                          decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: titleCount.colors[1].withOpacity(0.6),
                                offset: const Offset(1.1,4.0),
                                blurRadius: 8.0
                              )
                            ],
                            gradient: LinearGradient(
                              colors: titleCount.colors,
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight
                            ),
                            borderRadius: const BorderRadius.only(
                              bottomRight: Radius.circular(8.0),
                              bottomLeft: Radius.circular(8.0),
                              topLeft: Radius.circular(8.0),
                              topRight: Radius.circular(120.0),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.only(
                              top: 20, left: 16, right: 16, bottom: 8),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  titleCount.title,
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 24,
                                    letterSpacing: 0.2,
                                    color: Colors.white,
                                  ),
                                ),
                                const SizedBox(height: 70,),
                                Text(
                                  '${titleCount.count}',
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(
                                    fontWeight: FontWeight.w500,
                                    fontSize: 24,
                                    letterSpacing: 0.2,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 0,
                      left: 0,
                      child: Container(
                        width: 84,
                        height: 84,
                        decoration: BoxDecoration(
                          color: const Color(0xFFFAFAFA).withOpacity(0.2),
                          shape: BoxShape.circle,
                        ),
                      ),
                    ),
                    Positioned(
                      top: 0,
                      left: 8,
                      child: SizedBox(
                        width: 80,
                        height: 80,
                        child: Image.asset(titleCount.imagePath),
                      ),
                    )
                  ],
                ),
              ),
            )
          );
        });
  }
}